<template>
  <div style="position: relative; height: 300px; width: 100%">
    <SummitMap
      ref="MapComponent"
      :center="center"
      :zoom="zoom"
      @created="onMapCreated"
    >
      <ArcGISOnlineLayer
        key="Imagery"
        v-if="baseMapType === 'Imagery'"
        name="Imagery"
      ></ArcGISOnlineLayer>
      <ImageTileLayer
        v-if="baseMapType === 'Imagery'"
        url="/yulin-map/yl_image/{z}/{x}/{y}.png"
        :option="{ maxZoom: 14 }"
      ></ImageTileLayer>
      <ImageTileLayer
        v-if="baseMapType === 'Imagery'"
        url="/yulin-map/yl_imagelabel/{z}/{x}/{y}.png"
        :option="{ maxZoom: 14 }"
      ></ImageTileLayer>
      <GaoDeSingleLayer key="Streets" v-if="baseMapType === 'Streets'"></GaoDeSingleLayer>
      <div slot="bottom-right">
        <a-radio-group v-model="baseMapType" button-style="solid">
          <a-radio-button value="Imagery">影像图</a-radio-button>
          <a-radio-button value="Streets">街道图</a-radio-button>
        </a-radio-group>
      </div>
    </SummitMap>
  </div>
</template>

<script>
import SummitMap from "./summit-map/SummitMap";
import L from "leaflet";
import ImageTileLayer from "./summit-map/layers/ImageTileLayer";
import ArcGISOnlineLayer from "./summit-map/layers/arcgis/ArcGISOnlineLayer";
import axios from "axios";
import IconImage from "../assets/img/address-marker.svg";
import GaoDeSingleLayer from "@/components/GaoDeSingleLayer";

export default {
  name: "SRiverSegmentEditor",
  components: { GaoDeSingleLayer, ArcGISOnlineLayer, ImageTileLayer, SummitMap },
  props: ["lng", "lat", "address"],
  data() {
    return {
      baseMapType: "Imagery",
      riverData: null,
      drawType: null,
      river: null,
      position: [38.285718, 109.734031],
      center: [38.285718, 109.734031]
    };
  },
  watch: {
    address: {
      handler() {
        this.getLocation();
      }
    }
  },
  computed: {
    zoom() {
      return 9;
    }
  },
  methods: {
    getLocation() {
      if (this.address === "") {
        if (this.marker) {
          this.marker.remove();
        }
        this.$emit("update:lng", null);
        this.$emit("update:lat", null);
        return;
      }

      axios
        .get(
          `//api.tianditu.gov.cn/geocoder?ds={"keyWord":"${this.address}"}&tk=cfb6f30ebaf10d56e1f38ad23ded7c82`
        )
        .then(res => {
          if (!res.data.location) {
            return;
          }
          this.updatePosition(res.data.location.lon, res.data.location.lat);
        });
    },
    updatePosition(lng, lat) {
      this.$emit("update:lng", +lng);
      this.$emit("update:lat", +lat);

      if (this.marker) {
        this.marker.remove();
      }

      this.marker = L.marker([lat, lng], {
        icon: L.icon({
          iconUrl: IconImage,
          iconSize: [25, 38],
          iconAnchor: [12.5, 39]
        })
      }).addTo(this.map);
      this.marker.pm.enableLayerDrag();
      this.setListeners(this.marker);
      this.center = [lat, lng];
    },
    onMapCreated() {
      const map = this.$refs.MapComponent.map;

      map.on("pm:create", e => {
        this.drawType = "area";
        this.setListeners(e.layer);
        this.updateShape(e);
      });

      this.map = map;

      if (this.lng && this.lat) {
        this.updatePosition(this.lng, this.lat);
      }
    },
    startDrawRiverArea() {
      this.$refs.MapComponent.map.pm.enableDraw("Polygon", {
        pathOptions: {
          color: "#00ff00",
          fill: false
        }
      });
      this.drawType = "area";
    },
    setListeners(layer) {
      layer.on("pm:dragend", e => {
        this.updateShape(e);
      });
    },
    updateShape(e) {
      const [lng, lat] = e.layer.toGeoJSON().geometry.coordinates;
      this.updatePosition(lng, lat);
    }
  }
};
</script>

<style scoped></style>
